import React, { Component } from 'react';
import Item from '../Item';
import './index.css';
//在脚手架中prop-types模块是内置模块，不需要安装
import PropTypes from 'prop-types';

export default class List extends Component {
    //属性接受的校验处理
    static propTypes = {
        todos: PropTypes.array.isRequired,
        updateTodo: PropTypes.func.isRequired,
    }
    render() {
        const { todos } = this.props;
        return (
            <ul className="todo-main">
                {/* 使用map映射新数组渲染todo到页面,这里千万别多打括号，否则报错看都看不懂 */ }
                {todos.map((todo) => {
                    return (
                        <Item
                            key={todo.id}
                            {...todo}
                            updateTodo={this.props.updateTodo}
                        />
                    );
                })}

            </ul>
        )
    }
}
